class Pagination {
    constructor(options) {
        this.currentPage = 1;
        this.pageSize = options.pageSize || 10;
        this.total = options.total || 0;
        this.container = options.container;
        this.onChange = options.onChange;
        
        this.init();
    }

    init() {
        this.render();
        this.bindEvents();
    }

    render() {
        const totalPages = Math.ceil(this.total / this.pageSize);
        
        // 创建分页器HTML
        const html = `
            <div class="pagination">
                <div class="pagination-left">
                    <button class="prev-btn" ${this.currentPage === 1 ? 'disabled' : ''}>&lt;</button>
                    <div class="page-numbers">
                        ${this.generatePageNumbers()}
                    </div>
                    <button class="next-btn" ${this.currentPage === totalPages ? 'disabled' : ''}>&gt;</button>
                </div>
                <div class="pagination-right">
                    <span>Go to</span>
                    <input type="text" class="goto-input" value="${this.currentPage}">
                    <span>page</span>
                </div>
            </div>
        `;
        
        this.container.innerHTML = html;
    }

    generatePageNumbers() {
        const totalPages = Math.ceil(this.total / this.pageSize);
        let pages = [];
        
        if (totalPages <= 7) {
            pages = Array.from({ length: totalPages }, (_, i) => i + 1);
        } else {
            if (this.currentPage <= 3) {
                pages = [1, 2, 3, 4, 5, '...', totalPages];
            } else if (this.currentPage >= totalPages - 2) {
                pages = [1, '...', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
            } else {
                pages = [1, '...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...', totalPages];
            }
        }
        
        return pages.map(page => {
            if (page === '...') {
                return '<span class="ellipsis">...</span>';
            }
            return `<span class="page-number ${page === this.currentPage ? 'active' : ''}">${page}</span>`;
        }).join('');
    }

    bindEvents() {
        // 上一页
        this.container.querySelector('.prev-btn').addEventListener('click', () => {
            if (this.currentPage > 1) {
                this.changePage(this.currentPage - 1);
            }
        });
        
        // 下一页
        this.container.querySelector('.next-btn').addEventListener('click', () => {
            const totalPages = Math.ceil(this.total / this.pageSize);
            if (this.currentPage < totalPages) {
                this.changePage(this.currentPage + 1);
            }
        });
        
        // 页码点击
        this.container.querySelector('.page-numbers').addEventListener('click', (e) => {
            const pageNumber = e.target.closest('.page-number');
            if (pageNumber && !pageNumber.classList.contains('active')) {
                this.changePage(parseInt(pageNumber.textContent));
            }
        });
        
        // 跳转输入
        this.container.querySelector('.goto-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                const page = parseInt(e.target.value);
                const totalPages = Math.ceil(this.total / this.pageSize);
                if (page >= 1 && page <= totalPages) {
                    this.changePage(page);
                } else {
                    e.target.value = this.currentPage;
                }
            }
        });
    }

    changePage(page) {
        this.currentPage = page;
        this.render();
        this.bindEvents();
        if (this.onChange) {
            this.onChange(page);
        }
    }

    update(options) {
        Object.assign(this, options);
        this.render();
        this.bindEvents();
    }
} 